<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>光伏电站</title> 
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/bootstrap-3.3.0-dist/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/font-awesome-4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/simple-line-icons-master/css/simple-line-icons.css" >
    <link type="image/x-icon" rel="shortcut icon" href="__PUBLIC__/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/common/sidebar.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/common/menu.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/main.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/analysisView/analyData.css">
  </head>
  <body>
    
    <!-- 顶部菜单栏 -->
    <div id="top">
      <include file="Common/topbar" />
    </div>
    <include file="Common/tophidden" />
    <!-- 左侧菜单栏 -->
    <div id="left">
      <include file='Common/left' />
    </div>

    <div class="analysisView" id="right">
      <div class="container-fluid no-padding">

        <!-- 主内容标题栏 -->
        <div class="col-sm-12 overview-title">
          <div class="pull-left overview-title-font">
            <i class="fa fa-circle" style="color:#16da16; font-size: 10px;"></i>
            <span id="s_name"></span>
            <span style="cursor:pointer;color: #428bca; font-size: 13px;">[切换]</span>
            <span style="padding-left: 10px"><img src="__PUBLIC__/images/date.png">
              <span id="title-day" class="overview-title-time">日</span>
              <span id="title-month" class="overview-title-time title-time-active">月</span>
              <span id="title-year" class="overview-title-time">年</span>
              <span id="title-total" class="overview-title-time">累计</span>
            </span>
          </div>
        </div>

        <div id="main-content" class="col-sm-12">
          <!-- 添加自己内容 -->
          <div class="col-sm-12 panel">
            <div class="pull-right" style="margin: 10px 0;">
              <span class="m-r-xs">
                <i class="fa fa-minus m-r-xs" style="color:#f56669"></i>
                电站平均离散率
              </span>
              <span class="m-r-xs">
                <i class="fa fa-circle m-r-xs" style="color:#f56669"></i>
                逆变器功率离散率
              </span>
            </div>
            <div id="equipTopChart" style="width: 100%; height: 300px"></div>
          </div>
          <div class="col-sm-12 panel">
            <div class="pull-right" style="margin: 10px 0;">
              <span class="m-r-xs">
                <i class="fa fa-minus m-r-xs" style="color:#5b459d"></i>
                串均故障次数
              </span>
              <span class="m-r-xs">
                <i class="fa fa-minus m-r-xs" style="color:#3bafda"></i>
                串均受累次数
              </span>
            </div>
            <div id="equipDownChart" style="width: 100%; height: 300px"></div>
          </div>
        </div>

      </div>
    </div>
    <script src="__PUBLIC__/Static/Jquery/jquery.min.js"></script>
    <script src="__PUBLIC__/Static/bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>
    <script src="__PUBLIC__/script/station/sidebar.js"></script>
    <script src="__PUBLIC__/script/station/header_public.js"></script>
    <script src="__PUBLIC__/Static/echarts/dist/echarts.js"></script>
    <script type="text/javascript">
      var times = [];
      var days = [];

      //timesChart视图
      var equipTopChart = echarts.init(document.getElementById('equipTopChart'));
      var option = {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line',// 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
               color: '#c3c3c3',
            }
          }
        },
        grid: {
          left: 60,
          right: 60,
          top: 30,
          botton: 0,
        },
        xAxis: [
          {
            type: 'category',
            data: days,
            axisLine: {
              lineStyle: {
                color: '#C2C2C2'
              }
            },
            axisTick: [{
                show: 'false',
                alignWithLabel: 'true'
            }]
          },
        ],
        yAxis: {
          type: 'value',
          name: '%',
          min: '0',
          max: '5',
          axisLine: {
            lineStyle: {
              color: '#C2C2C2'
            }
          },
          axisTick: [{
            show: 'false',
            alignWithLabel: 'true'
          }],
          splitLine: [{
            show: 'false',
          }],
        },
        series: [
          {
              name: ' 电站平均离散率',
              type: 'line',
              data: [],
              itemStyle:{  
                normal:{color:'#f56669'},
                //emphasis:{color:'#feb64c'}  
              }  
          },
          {
              name: '逆变器功率离散率',
              type: 'bar',
              barWidth: '15px',
              data: [],
              itemStyle:{  
                normal:{color:'#f56669'},  
              } 
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      equipTopChart.setOption(option);

      //faultTimesChart视图
      var equipDownChart = echarts.init(document.getElementById('equipDownChart'));
      var option = {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line',// 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
               color: '#c3c3c3',
            }
          }
        },
        grid: {
          left: 60,
          right: 60,
          top: 30,
          botton: 0,
        },
        xAxis: [
          {
            type: 'category',
            data: days,
            axisLine: {
              lineStyle: {
                color: '#C2C2C2'
              }
            },
            axisTick: [{
                show: 'false',
                alignWithLabel: 'true'
            }]
          },
        ],
        yAxis: {
          type: 'value',
          name: '次',
          min: '0',
          max: '5',
          axisLine: {
            lineStyle: {
              color: '#C2C2C2'
            }
          },
          axisTick: [{
            show: 'false',
            alignWithLabel: 'true'
          }],
          splitLine: {
            show: true,
            lineStyle: {
              color: '#C2C2C2',
              type: 'dashed',
            }
          },
        },
        series: [
          {
              name: '串均故障次数',
              type: 'bar',
              barWidth: '15px',
              data: [],
              itemStyle:{  
                normal:{color:'#5b459d'},
                //emphasis:{color:'#feb64c'}  
              }  
          },
          {
              name: '串均受累次数',
              type: 'bar',
              barWidth: '15px',
              barGap: '0',
              data: [],
              itemStyle:{  
                normal:{color:'#3bafda'},  
              } 
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      equipDownChart.setOption(option);

      setTimeout(function (){
        window.onresize = function () {
            equipDownChart.resize();
            equipTopChart.resize();
        }
      },200)
    </script>   
  </body>

</html>